<app-content-header
  [search]="search"
  [custom]="custom">
  <ng-template #search>
    <app-search [(data)]="searchSchema" (bindSearch)="handleSearch()"></app-search>
  </ng-template>

  <ng-template #custom>
    <button
      nz-button
      nz-tooltip
      nzPlacement="left"
      nzType="primary"
      nzShape="round"
      nzSize="default"
      (click)="goNewManualAuth()">
      <i nz-icon type="plus"></i> {{'GENERAL.INFO.BREADCRUMB.CREATE' | translate}}
    </button>
  </ng-template>
</app-content-header>

<div class="cil-table-block">
  <st
    #st
    [scroll]="scroll"
    [data]="data"
    [columns]="columns"
    [widthMode]="{type: 'strict' }"
    [ps]="ps"
    [pi]="pi"
    [page]="stPage"
    [total]="total"
    [loading]="loading"
    (change)="onChange($event)">

    <ng-template st-row="transAmt" let-item>
      <span>{{item.transAmt | amtFormat:item.currency | async}}</span>
    </ng-template>
  </st>

  <ng-template #insTpl>
    <app-aams-select
      level="institution"
      [(ngModel)]="selectedAcquirer"
      [disabled]="isAcquirerUser"
      (valueChange)="aamsChangeHandler($event)"
    ></app-aams-select>
  </ng-template>

  <ng-template #agentTpl>
    <app-aams-select
      level="agent"
      [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
      [(ngModel)]="selectedGroup"
      [disabled]="isAgentUser"
      (valueChange)="aamsChangeHandler($event)"
    ></app-aams-select>
  </ng-template>

  <ng-template #merchantTpl>
    <app-aams-select
      level="merchant"
      [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
      [agentCode]="selectedGroup ? selectedGroup.code : ''"
      [(ngModel)]="selectedMerchant"
      [disabled]="isMerchantUser"
      (valueChange)="aamsChangeHandler($event)"
    ></app-aams-select>
  </ng-template>

  <ng-template #storeTpl>
    <app-aams-select
      level="store"
      [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
      [agentCode]="selectedGroup ? selectedGroup.code : ''"
      [intMerCode]="selectedMerchant ? selectedMerchant.code : ''"
      [(ngModel)]="selectedStore"
      [disabled]="isStoreUser"
      (valueChange)="aamsChangeHandler($event)"
    ></app-aams-select>
  </ng-template>

  <ng-template #transAmt>
    <nz-input-group>
      <div nz-col nzSpan="10">
        <nz-input-number
          [style.width]="'100%'"
          [ngModel]="transAmtFrom"
          (ngModelChange)="transAmtFrom=$event;validateTransAmt()"
          [nzMin]="0"
          [nzPrecision]='0'>
        </nz-input-number>
      </div>
      <div nz-col nzSpan="4" class="cil__trans-amt-split">
        <div>——</div>
      </div>
      <div nz-col nzSpan="10">
        <nz-input-number
          [style.width]="'100%'"
          [ngModel]="transAmtTo"
          (ngModelChange)="transAmtTo=$event;validateTransAmt()"
          [nzMin]="0"
          [nzPrecision]='0'>
        </nz-input-number>
      </div>
    </nz-input-group>
  </ng-template>

  <ng-template #tplCurrency>
    <app-currency-select [(ngModel)]="selectedCurrency" [insCode]="user.insCode" [intStoreCode]="user.intStoreCode"></app-currency-select>
  </ng-template>